<template>
  <!-- 选择分销员 -->
  <div>
    <div>
      <!-- 选择员工 -->
      <div>
        <div style="margin-bottom: 10px">选择员工：</div>
        <el-select
          v-model="selUser"
          filterable
          multiple
          placeholder="请选择员工"
          remote
          :remote-method="remoteMethod"
          style="width: 500px"
        >
          <el-option
            v-for="(item, index) of userList"
            :key="index"
            :label="item.real_name"
            :value="item.id"
          />
        </el-select>
      </div>
    </div>
    <div class="flex_between" style="margin-top: 15px">
      <div></div>
      <el-button type="primary" @click="submitSale">确认</el-button>
    </div>
  </div>
</template>

<script>
  import { getUserList } from '@/api/public'

  export default {
    data() {
      return {
        userList: [], // 存放获取的员工列表
        selUser: [], // 存放选择器选中的员工id
      }
    },
    created() {
      this.getUser()
    },
    methods: {
      remoteMethod(keyword) {
        this.getUser(keyword)
      },
      // 获取员工列表
      getUser(keyword) {
        const params = {
          real_name: keyword,
        }
        getUserList(params).then((res) => {
          this.userList = res.data
        })
      },
      // 提交选中的分销员
      submitSale() {
        this.$emit('send', this.selUser.toString())
      },
    },
  }
</script>

<style scoped>
  .flex_between {
    display: flex;
    justify-content: space-between;
  }
</style>
